<template>
  <div id="app">
    <el-container>
      <el-header><i class="el-icon-edit"></i>留言板</el-header>
      <el-main>
        <el-button type="success" @click="add()">留言</el-button>

        <el-dialog title="留言详细" :visible.sync="dialogFormVisible">
          <el-form v-model="addnodepads">
            <el-form-item label="留言内容" :label-width="formLabelWidth">
              <el-input
                autocomplete="off"
                v-model="addnodepads.detailed"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="addNodePad">确 定</el-button>
          </div>
        </el-dialog>
        <el-table :data="nodeList" border style="width: 100%">
          <el-table-column fixed prop="detailed" label="详细信息">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <!-- <el-button
                @click="handleClick(scope.row._id)"
                type="text"
                size="small"
                >查看</el-button
              > -->
              <el-button
                type="danger"
                size="small"
                @click="remove(scope.row._id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- <div class="block">
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </div> -->
  </div>
</template>

<script>
export default {
  created() {
    this.pageInation();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    add() {
      this.dialogFormVisible = true;
    },
    addNodePad() {
      this.$http.post("/nodePads", this.addnodepads).then(() => {
        this.pageInation();
        //清空录入框信息
        this.dialogFormVisible = false;
        this.$message({
          message: "录入成功",
          type: "success",
        });
      });
    },
    //关闭模拟框
    close() {
      this.dialogFormVisible = false;
    },
    remove(id) {
      this.$http.delete(`nodePads/${id}`).then(() => {
        console.log("success");
        this.pageInation();
      });
    },
    pageInation() {
      let that = this;
      this.$http.get("/getNodepadList").then((res) => {
        console.log(res.data[0].detailed);
        that.nodeList = res.data;
      });
    },
  },
  data() {
    return {
      nodeList: [],
      addnodepads: {},
      detailed: "",
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,

      formLabelWidth: "120px",
    };
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
}
.el-header {
  background-color: #14c145;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.el-table {
  margin-top: 30px;
}
.block {
  float: right;
}
</style>
